<template>
    <h3>欢迎加入旅游文章网站——飞鸟旅游</h3>
    <div class="big_box">
        <div class="user">
            <el-card style="max-width: 480px">
                <template #header>管理员：{{ user_name }}</template>
                <img
                  :src="user_picUrl"
                  style="width: 100%"
                />
            </el-card>
        </div>
        <div class="right_box ">
            <div class="user_nums sm_box">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
		    		<div class="grid-content grid-con-1">
		    			<el-icon class="grid-con-icon">
		    				<User />
		    			</el-icon>
		    			<div class="grid-cont-right">
		    				<div class="grid-num">{{ users_totalNum }}</div>
		    				<div>用户数量</div>
		    			</div>
		    		</div>
		    	</el-card>
            </div>
            <div class="article_nums sm_box">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
		    		<div class="grid-content grid-con-2">
		    			<el-icon class="grid-con-icon">
		    				<ChatDotRound />
		    			</el-icon>
		    			<div class="grid-cont-right">
		    				<div class="grid-num">{{ article_totalNum }}</div>
		    				<div>文章数量</div>
		    			</div>
		    		</div>
		    	</el-card>
            </div>
            <div class="banner_nums sm_box">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
		    		<div class="grid-content grid-con-3">
		    			<el-icon class="grid-con-icon">
		    				<Picture />
		    			</el-icon>
		    			<div class="grid-cont-right">
		    				<div class="grid-num">{{ banner_totalNum }}</div>
		    				<div>轮播图数量</div>
		    			</div>
		    		</div>
		    	</el-card>
            </div>

            <div class="navi_nums sm_box">
                <el-card shadow="hover" :body-style="{ padding: '0px' }">
		    		<div class="grid-content grid-con-4">
		    			<el-icon class="grid-con-icon">
		    				<Position />
		    			</el-icon>
		    			<div class="grid-cont-right">
		    				<div class="grid-num">{{ navi_totalNum }}</div>
		    				<div>导航数量</div>
		    			</div>
		    		</div>
		    	</el-card>
            </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue'
    import { userList,listBannerFunc,listArticleFunc,getAdminPicUrl,listNavFunc } from '../api/request'
    let user_name = localStorage.getItem("NICK_NAME");
    let user_picUrl:any = ref('');
    // 总数
    let users_totalNum = ref(0)
    let article_totalNum = ref(0)
    let banner_totalNum = ref(0)
    let navi_totalNum = ref(0)

    // 定义函数获取管理员头像
    const userPicUrlFn = async ()=> {
        // let token = localStorage.getItem("TOKEN")
        await getAdminPicUrl().then(
            (content:any)=>{
                // console.log(content)
                let {admin_url, code } = content.data;
                // console.log(result,code)
                if(code == 200) {
                    user_picUrl.value = admin_url;
                    // console.log(user_picUrl)
                }
            }
        )
    }

    userPicUrlFn();

    // 定义函数获取用户列表
    const userListFn = async (page=1,pageSize=5)=> {
        // let token = localStorage.getItem("TOKEN")
        await userList({page,pageSize}).then(
            (content:any)=>{
                // console.log(content)
                let {result, code,total} = content.data;
                // console.log(result,code)
                if(code == 200) {
                    users_totalNum.value = total;
                }
            }
        )
    }

    userListFn();

    // 定义函数获取轮播图列表
    const bannerListFn = async ()=> {
        // let token = localStorage.getItem("TOKEN")
        await listBannerFunc().then(
            (content:any)=>{
                // console.log(content)
                let {code ,result} = content.data;
                // console.log(result,code)
                if(code == 200) {
                    banner_totalNum.value = result.length;
                }
            }
        )
    }

    bannerListFn();

    // 定义函数获取文章列表
    const paperListFn = async (page=1,pageSize=5)=> {
        // let token = localStorage.getItem("TOKEN")
        await listArticleFunc({page,pageSize}).then(
            (content:any)=>{
                // console.log(content)
                let { code  , total} = content.data;
                // console.log(result,code)
                if(code == 200) {
                    article_totalNum.value = total;
                }
            }
        )
    }

    paperListFn();

    // 定义函数获取导航列表
    const naviListFn = async ()=> {
        // let token = localStorage.getItem("TOKEN")
        await listNavFunc().then(
            (content:any)=>{
                // console.log(content)
                let {result, code} = content.data;
                // console.log(result,code)
                if(code == 200) {
                    navi_totalNum.value = result.length;
                }
            }
        )
    }

    // 
    naviListFn();
</script>

<style lang="scss" scoped>
    h3{
        color: red;
    }
    .big_box{
        display: flex;
        .right_box{
            .sm_box{
                margin-bottom: 42px;
            }
        }
    }
    .grid-content {
	    display: flex;
	    align-items: center;
	    height: 100px;
    }

    .grid-cont-right {
    	flex: 1;
    	text-align: center;
    	font-size: 14px;
    	color: #999;
        width: 200px;
    }

    .grid-num {
    	font-size: 30px;
    	font-weight: bold;
    }

    .grid-con-icon {
    	font-size: 50px;
    	width: 100px;
    	height: 100px;
    	text-align: center;
    	line-height: 100px;
    	color: #fff;
    }

    .grid-con-1 .grid-con-icon {
    	background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
    	color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
    	background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
    	color: rgb(100, 213, 114);
    }

    .grid-con-3 .grid-con-icon {
    	background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
    	color: rgb(242, 94, 67);
    }

    .grid-con-4 .grid-con-icon {
    	background: rgb(231, 231, 55);
    }

    .grid-con-4 .grid-num {
    	color: rgb(231, 231, 55);
    }
</style>